<template>
  <layout
    style="background-color: #fff"
    fixed-navbar>
    <close-navbar>资讯</close-navbar>
    <div class="article">
      <div class="article__title">{{ title }}</div>
      <div class="article__data">
        <div class="article__from"><fa-icon
          icon="newspaper"
          class="mr-8"/> {{ from }}</div>
        <div class="article__views"><fa-icon
          icon="eye"
          class="mr-8"/> {{ views }} 浏览</div>
        <div class="article__date"><fa-icon
          icon="calendar"
          class="mr-8"/> {{ date }}</div>
      </div>
      <div
        class="article__content"
        v-html="content"/>
    </div>
  </layout>
</template>

<style lang="scss" scoped>
  .article {
    padding: 24px 32px;
    &__title {
      font-size: 32px;
      color: #343434;
      margin-bottom: 32px;
    }
    &__from, &__views, &__date {
      display: flex;
      align-items: center;
    }
    &__data {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      color: #B3B3B3;
      margin-bottom: 32px;
    }
    &__content {
      font-size: 28px;
      color: #333;
    }
  }
</style>

<style lang="scss">
  .article {
    &__content {
      font-size: 28px;
      color: #333;
      img {
        display: block;
        max-width: 100%;
      }
    }
  }
</style>

<script>
import Layout from '@/components/Layout'
import CloseNavbar from '@/components/CloseNavbar'
import { getNew } from '@/api'

export default {
  components: {
    Layout,
    CloseNavbar
  },
  data () {
    return {
      title: '',
      from: '',
      views: 0,
      date: '',
      content: ''
    }
  },
  watch: {
    '$route': 'fetchData'
  },
  async created () {
    await this.fetchData()
  },
  methods: {
    async fetchData () {
      const { code, data } = await getNew(this.$route.params.id)
      if (code === 1) {
        this.title = data.news_title
        this.from = data.news_origin
        this.views = data.news_views
        this.date = data.news_time
        this.content = data.news_content
      }
    }
  }
}
</script>
